<template>
  <div id="bar2">

  </div>
</template>
 
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  var chartDom = document.getElementById('bar2');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    dataset: {
      source: [
        ['score', 'amount', 'product'],
        [80.3, 5822, '哈尔滨'],
        [55.1, 7824, '桂林'],
        [35.1, 7854, '成都'],
        [37.1, 7824, '成都'],
        [84.4, 4132, '澳门'],
        [60.1, 1255, '香港'],
        [29.7, 2145, '武汉'],
        [48.1, 7146, '上海'],
        [99.6, 9152, '北京'],
        [20.6, 10852, '深圳'],
        [52.7, 2012, '三亚']
      ]
    },
    grid: { containLabel: true },
    xAxis: { name: 'amount', show: false },
    yAxis: {
      type: 'category',
      axisTick: {
        show: false
      }

    },
    series: [
      {
        type: 'bar',
        color: '#679cf6',
        encode: {
          y: 'product'
        },
        itemStyle:{
          color:'#679cf6'
        },
        barWidth:11,
      },

    ]
  };

  option && myChart.setOption(option);
})
</script>
 
<style scoped>
#bar2 {
  margin-top: -50px;
  width: 420px;
  height: 100%;
}
</style>